<!-- 总览页面 -->
<template>
  <!-- 地图 -->
  <div class="pandect-content">
    <div class="pandect-left">
      <CustomCard title="基础数据展示">
        <template #content>
          <EChartsComponent :options="chartOptions" />

        </template>
      </CustomCard>

    </div>
    <div class="pandect-center">中</div>
    <div class="pandect-right">右</div>
  </div>
</template>

<script>
import CustomCard from '@/components/CustomCard'
import EChartsComponent from '@/components/EChartsComponent.vue';
export default {
  name: 'Pandect',
  components: {
    CustomCard, EChartsComponent
  },
  data() {
    return {
      chartOptions: {
        title: {
          text: 'ECharts 示例'
        },
        tooltip: {},
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [{
          name: '销量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20]
        }]
      }
    }
  },

  mounted() {
    console.log(`%c this.$store.state.user.roles :=====>`, `color:red`, this.$store.state.user.roles);
  },
  methods: {

  },
}

</script>
<style scoped lang='scss'>
.pandect-content {

  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;

  .pandect-left {
    flex: 1;
    margin-top: 16px;
    background: yellow;
  }

  .pandect-center {
    flex: 1;
    margin-top: 107px;
    background: green;

  }

  .pandect-right {
    flex: 1;
    background: rebeccapurple;
    margin-top: 56px;
  }
}
</style>
<style >
.custom-popper .el-select-dropdown .el-checkbox {
  max-height: 100px;
  /* 根据需要调整最大高度 */
  overflow: hidden;
  /* 溢出隐藏 */
  text-overflow: ellipsis;
  /* 文本溢出显示... */
  display: -webkit-box;
  /* 使用webkit的盒子模型 */
  -webkit-line-clamp: 3;
  /* 限制显示的行数，这里设置为3行 */
  -webkit-box-orient: vertical;
  /* 设置盒子方向为垂直 */
}
</style>